<template>
  <!--  改图删掉下面两行-->
<div>
  <el-timeline>
    <el-timeline-item
        v-for="(activity, index) in stepsData"
        :key="index"
        :timestamp="activity[timelineItemProps.timestamp]"
    >
      <div class="container">
        <div class="title">{{ activity[timelineItemProps.title] }}</div>
        <div class="timer">{{ activity[timelineItemProps.timer] }}</div>
      </div>
    </el-timeline-item>
  </el-timeline>
  <template>
    <logisticsTracking ref="logisticsTracking" :detail="detail" :dialogVisible.sync="isShowDialog" />
  </template>
</div>
</template>

<script>
  import logisticsTracking from "../../../components/logisticsTracking/logisticsTracking";
  import {queryLogisticsInfo} from "../../../orderSearch/api";
export default {
  components: {
    logisticsTracking
  },
  props: {
    groupTitle: {
      type: String,
      default: ""
    },
    stepsData: {
      type: Array,
      default: () => []
    },
    sendOutInfo:{
      type: Array,
      default: () => []
    },
    timelineItemProps: {
      type: Object,
      default: () => {
        return {
          timestamp: "description",
          title: "title",
          timer: "timer"
        };
      }
    }
  },
  data(){
    return {
      isShowDialog: false,
      detail:[]
    }
  },
  updated() {
    this.insertCarName();
    console.log(this.sendOutInfo)
  },
  methods: {
    insertCarName() {
      let dotList = document.getElementsByClassName(
        "el-timeline-item__timestamp is-bottom"
      );
      // let carList = ["京K5362","鄂A123"];
      // let dot = dotList[0]
      let carList = [];
      let dot = null;
      dotList.forEach(item => {
        // console.log(item.innerText)
        let str = item.innerText;
        if (str.match("车牌号")) {
          dot = item;
          item.innerText = str.split("：")[0] + '：'
          carList = str.split("：")[1].split(",");
        }
      });
      // console.log(carList, dot);
      if (dot) {
        carList.forEach((item,index) => {
          // 车牌号
          let node = document.createElement("a");
          node.style.color = "#0089EF";
          node.innerText = item.trim();
          node.onclick = function goOut() {
            console.log(node.innerText);
          };
          node.addEventListener("click",e =>{
            this.showDialog(item.trim())
          },false)
          dot.appendChild(node);
          // 逗号
          let comma = document.createElement("a");
          comma.style.color = "#0089EF";
          comma.innerText = ','
          dot.appendChild(comma);
        });
        // 删除末尾的逗号
        dot.removeChild(dot.childNodes[dot.childElementCount]);
      }
    },
    showDialog(carNumber) {
      let obj = {
        id: this.$route.query.id,
        type: 2
      };
      queryLogisticsInfo(obj).then(res => {
        console.log(res.data.data);
        this.detail = res.data.data
        this.isShowDialog = true;
        // 选中哪个车牌号就弹出那个车的路线信息
        this.$refs.logisticsTracking.$refs.invoice.handleSelectCarNumber(carNumber)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .title {
    margin-right: 10px;
  }
}
</style>
